<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div class="header">
            <input type="checkbox" :checked="allChecked" @change="changeAll"> 
        </div>
        <ul>
            <li v-for="(item,index) in list">
                <input type="checkbox" v-model="item.checked">
                <img :src="imgPrefix+item.pro_img" width="100px" height="100px" alt="">
                <span>{{item.pro_name}}</span>---
                <button @click="reduce(index)">-</button>
                <span>数量:{{item.pro_num}}</span>
                <button @click="add(index)">+</button>---
                <span>单价:{{item.pro_price}}</span>---
                <span>金额:{{item.pro_num*item.pro_price}}</span>

            </li>
        </ul>
        <hr>
        <div>
            合计：{{totalPrice}}元--------------------------------------------------------
            数量：{{totalNum}}



        </div>
    </div>
</body>
<script src="vue.js"></script>
<script>
    const{createApp,ref,reactive,computed,watch}=Vue
    let cartData=[
            {
                'pro_name': '产品名称2',//产品名称
                'pro_num': 3,//数量
                'pro_img': 'images/test1.jpg',//图片链接
                'pro_price': 800//单价
            },
            {
                'pro_name': '产品名称2',//产品名称
                'pro_num': 1,//数量
                'pro_img': 'images/test2.jpg',//图片链接
                'pro_price': 800//单价
            }
            ]
    const app=createApp({
        setup(){
            cartData=cartData.map(v=>{
                v.checked=false
                return v
            })
            let list =ref(cartData)
            const imgPrefix="https://www.jq22.com/demo/vuegwc202007152244/"
            function reduce(index){
                list.value[index].pro_num--
                if(list.value[index].pro_num<=2){
                    alert('两件起拍')
                    return
                }
            }
            function add(index){
                list.value[index].pro_num++
                if(list.value[index].pro_num>=10){
                    alert('限购10件')
                    return
                }
            }

            // let checklist=computed(function(){
            //     return list.value.map(v=>{
            //         return v.checked
            //     })
            // })
            let allChecked=ref(false)
            function changeAll(e){
                // let val = e.target.checked
                list.value.forEach(function(v){
                    v.checked=e.target.checked//全选框√后，其他框√
                })
            }
            let totalPrice=ref(0)//总价
            let totalNum=ref(0)//总数

            // watchEffect(list,function(n){
            //     console.log(n.every(v=>v.checked))
            //     allChecked.value=n.every(v=>v.checked)


            //     //总价
            //     n.forEach(function(v){
            //         if(v.checked){
            //             totalNum.value+=v.pro_num
            //             totalPrice.value+=v.pro_num*v.pro_price
            //         }
            //     })

            // },{
            //     deep:true
            // })
            watchEffect(function(n){
					
					// console.log(n.every(v=>v.checked))
					
					allChecked.value = list.value.every(v=>v.checked)
					 let num = 0
					 let price = 0
					list.value.forEach(v=>{
						if(v.checked){
							console.log(v.pro_num)
							num+=v.pro_num;
							price+=v.pro_num*v.pro_price
						}
					})
					
					totalNum.value=num;
					totalPrice.value= price
				})

            return{
                list,imgPrefix,reduce,add,allChecked,changeAll,totalNum,totalPrice,
            }
        }
    }).mount('#app')
</script>
</html>